<template>
  <div class="app-container">
    <el-dialog :title="this.title" :visible="visible" @close="cancel" width="1200px"
         :close-on-click-modal="false" :close-on-press-escape="false"
          append-to-body>
          <el-row>
            <el-col :span="24">
              <el-table border v-loading="loading" :data="tableData" style="margin-top:10px">
                <el-table-column label="变更阶段" align="left" width="150"  prop="nodeName">  </el-table-column>
                <el-table-column label="原开始时间" align="left" width="120"  prop="startTime">
                 </el-table-column>
                <el-table-column label="原结束时间" align="left" width="120"  prop="endTime">
                 </el-table-column>
                <el-table-column label="变更后开始时间" align="left"   prop="newStartTime">
                  <template slot-scope="scope">
                    <el-date-picker
                        v-model="scope.row.newStartTime"
                         type="date"
                         value-format="yyyyMMdd"
                         format="yyyyMMdd"
                        placeholder="选择日期">
                      </el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column label="变更后结束时间" align="left"   prop="newEndTime">
                  <template slot-scope="scope">
                    <el-date-picker
                        v-model="scope.row.newEndTime"
                         type="date"
                         format="yyyyMMdd"
                         value-format="yyyyMMdd"
                        placeholder="选择日期">
                      </el-date-picker>
                  </template>
                </el-table-column>
                <el-table-column label="备注" align="left"   prop="remark">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.remark" placeholder="请输入备注"></el-input>
                  </template>
                </el-table-column>
              </el-table> 
            </el-col>
          </el-row>
          <el-row style="margin-top:20px">
            <el-col :span="24">
              <el-form ref="param" :model="param" :rules="rules" label-width="80px">
                <el-form-item label="变更说明" prop="remark">
                  <el-input type="textarea" v-model="param.remark"></el-input>
                </el-form-item>
              </el-form>     
            </el-col>
          </el-row>
           
          <span slot="footer" class="dialog-footer" > 
            <el-button  @click="cancel">取 消</el-button>
            <el-button type="primary" v-hasPermi="['projectManage:list:update']"  @click="onSure()">提 交</el-button>
          </span>
        
    </el-dialog>
     
    
  </div>
</template>

<script>
  import {getMilestone,modifyProjectTime,updateModifyProjectTime,getHistoryModifyProject}  from "@/api/projectManage/projectList";
  
  export default {
  name: "ProjectTemplete",
  dicts: ['owner_position'],
  data() {
      return {
        loading:false,
        visible:false,
        userList:[],
        title:'',
        param:{
          id:null,
          remark:null
        },
        isUpdate:false,
        tableData:[ ],
        rules:{
          remark: [
            { required: true, message: "变更说明不能为空", trigger: "blur" }
          ]  
        }
      }
  },
  created() {
     
  },

  methods: {
 
    //提交模板
    onSure(){

      if(this.param.remark == null){
        this.$alert('变更说明不能为空', '提示' );
        return false;
      }

      //校验开始时间不能大于结束时间
      for(let i=0;i<this.tableData.length;i++){
        
         let item = this.tableData[i];
         
         if(item.newEndTime != null){
            if(item.newStartTime != null){
              console.log(item.newEndTime );
              console.log(item.newStartTime );
               if(item.newEndTime <  item.newStartTime){
                  this.$alert('第'+(i+1)+'行，开始时间不能大于结束时间', '提示' );
                  return false;
               }
            }else{
              if(item.newEndTime <  item.startTime){
                  this.$alert('第'+(i+1)+'行，开始时间不能大于结束时间', '提示' );
                  return false;
               }
            }
         } 

      }



      

      this.$modal.loading("请稍候...");
      this.param.projectModifyRecordDetailList = this.tableData;

      if(this.isUpdate){
         //更新流程 
         this.param.type = 10;
         updateModifyProjectTime(this.param).then(response=>{
            
              this.$modal.closeLoading();
              this.cancel();
              this.$emit('query');
            
          }).catch(()=>{
            this.$modal.closeLoading();
            
          }) 


      }else{

          //新增流程
          this.param.projectListId = this.param.id;
          this.param.type = 10;
          modifyProjectTime(this.param).then(response=>{
            
              this.$modal.closeLoading();
              this.cancel();
              
          }).catch(()=>{
            this.$modal.closeLoading();
            
          }) 
      }


      

    },


    //加载详情
    getDetail(){
      this.loading = true;
      getMilestone(this.param.id).then(response=>{
         this.tableData = response.data.milestones;
         this.loading = false;
       }); 

    },

    //历史变更数据
    handleHistoryDetail(row){
      
      getHistoryModifyProject(row).then(response=>{

        this.param.projectListId = row.projectListId;  
        this.tableData = response.data;
         
       
      })
    },

     
 

     //初始化
     init(title,id){
      this.visible = true;
      this.title = title;
      this.param.id = id;
      this.getDetail();
     }, 

     //初始化
     initUpdate(title,row){ 
      this.visible = true;
      this.title = title;
      this.isUpdate=true;
      
      this.param.id = row.id;
      this.param.remark = row.remark; 
      this.param.oaId = row.oaId;
       
     }, 


     // 取消按钮
     cancel() {
        this.visible = false;
        this.tableData = [];
        this.param.remark = null;  
     }
  }
};
</script>
<style>
  .date_picker{
    width: 150px !important;
  }

  
/* 覆盖鼠标悬停时的背景色 */
.el-table .el-table__body-wrapper tbody tr:hover > td {
  background-color: transparent !important; /* 设置为透明 */
  /* 或者设置为特定的颜色，例如 */
  /* background-color: #fafafa !important; */
}

 /*去掉表格单元格边框*/
 .customer-no-border-table th{
  border:none  !important;
}
.customer-no-border-table td,.customer-no-border-table th.is-leaf {
  border:none  !important;
}
/*表格最外边框*/
.customer-no-border-table .el-table--border, .el-table--group{
  border: none  !important;
}
/*头部边框*/
.customer-no-border-table thead tr th.is-leaf{
  border: 0px solid #EBEEF5;
  border-right: none;
}
.customer-no-border-table thead tr th:nth-last-of-type(2){
border-right: 0px solid #EBEEF5;
}
/*表格最外层边框-底部边框*/
.customer-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{
  width: 0;
}
.customer-no-border-table::before{
width: 0;
}
.customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
width: 0;
}
.customer-no-border-table .el-table__header tr th{
background: #fff;
color: #333333 ;
padding: 3px ;
fontWeight: 550 ;
height: 36px ;
border: 0px;
font-size: 15px;
}

</style>
 
 
